<template>
  <div class="my-body">
    <el-form :inline="true" :modal="searchForm">
      <el-form-item>
        <el-input placeholder="请输入" maxlength="100" v-model="searchForm.clientId">
          <template slot="prepend">客户端ID</template>
        </el-input>
      </el-form-item>
      <el-button type="primary" style="width: 100px" @click="init">查询</el-button>
      <el-button type="primary" plain style="width: 100px" @click="dialogShow = true">添加</el-button>
    </el-form>
    <el-table :data="tableData" border ref="multipleTable">
      <el-table-column label="当局" prop="authorities"/>
      <el-table-column label="客户端ID" prop="clientId" width="200px"/>
      <el-table-column label="访问令牌有效性" prop="accessTokenValidity" width="200px"/>
      <el-table-column label="附加信息" prop="additionalInformation" width="200px"/>
      <el-table-column label="授权的赠款类型" prop="authorizedGrantTypes" width="450px">
        <template slot-scope="scope">
          <el-tag style="margin-right: 5px"
                  :key="tag.label"
                  v-for="tag in authorizedGrantTypes"
                  :disable-transitions="false" v-if="scope.row.authorizedGrantTypes.indexOf(tag.value)>-1">
            {{ tag.label }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="自我认可" prop="autoapprove" width="400px"/>
      <el-table-column label="刷新令牌有效性" prop="refreshTokenValidity" width="200px"/>
      <el-table-column label="资源编号" prop="resourceIds"/>
      <el-table-column label="范围" prop="scope" width="300px"/>
      <el-table-column label="Web服务器重定向URL" prop="webServerRedirectUri" width="400px"/>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-link type="primary" :loading="loading" :underline="false" @click="edit(scope.row)">编辑</el-link>
          <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="del(scope.row)">
            <el-link type="danger" slot="reference" :loading="loading" :underline="false" style="margin-left: 5px;">删除
            </el-link>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" style="margin-top: 10px"
                   :page-size="page.pageSize"
                   :total="page.total"
                   :current-page="page.currentPage"
                   @current-change="currentChange">
    </el-pagination>
    <!--  编辑-->
    <el-dialog title="编辑" :close-on-click-modal="false" :visible.sync="dialogShow" width="1000px" @close="closeMode">
      <el-form ref="form" :model="form" :rules="rules" label-width="180px" style="margin-right: 50px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户编号：" prop="clientId">
              <el-input v-model="form.clientId" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="名称：" prop="authorities">
              <el-input v-model="form.authorities" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="密码：" prop="clientSecret">
              <el-input v-model="form.clientSecret" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="访问令牌有效性：" prop="accessTokenValidity">
              <el-input-number :min=0 :max=604800 v-model="form.accessTokenValidity" placeholder="请输入S"
                               style="width: 100%"/>
            </el-form-item>
            <el-form-item label="附加信息：" prop="additionalInformation">
              <el-input v-model="form.additionalInformation" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="当局：" prop="autoapprove">
              <el-input v-model="form.autoapprove" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="授权的赠款类型：" prop="authorizedGrantTypes">
              <select-string v-model="form.authorizedGrantTypes" :option="authorizedGrantTypes"/>
            </el-form-item>
            <el-form-item label="刷新令牌有效性：" prop="refreshTokenValidity">
              <el-input-number :min=0 :max=604800 v-model="form.refreshTokenValidity" placeholder="请输入S"
                               style="width: 100%"/>
            </el-form-item>
            <el-form-item label="资源编号：" prop="resourceIds">
              <el-input v-model="form.resourceIds" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="范围：" prop="scope">
              <el-input v-model="form.scope" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="Web服务器重定向URL：" prop="webServerRedirectUri">
              <el-input v-model="form.webServerRedirectUri" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button @click="dialogShow = false">关闭</el-button>
        <el-button type="primary" @click="submit()" :loading="loading">提交</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import service from "@/api/service";
import table from "@/mixins/table";
import selectString from "@/components/selectString";

export default {
  name: "client",
  mixins: [table],
  components: {
    selectString
  },
  data() {
    return {
      authorizedGrantTypes: [
        {label: '密码模式', value: 'password'},
        {label: '更新密码模式', value: 'refresh_token'},
        {label: '验证码模式', value: 'verify'},
        {label: '小程序模式', value: 'wx-xcx-login'},
        {label: '授权码模式', value: 'authorization_code'},
        {label: '客户端模式', value: 'client_credentials'},
      ],
      form: {
        clientId: '',
        clientSecret: '',
        autoapprove: '',
        additionalInformation: '',
        authorities: '',
        authorizedGrantTypes: '',
        resourceIds: '',
        scope: '',
        webServerRedirectUri: '',
        accessTokenValidity: 0,
        refreshTokenValidity: 0,

      },
      rules: {
        clientId: {required: true, trigger: 'blur', message: '不能为空'},
        authorities: {required: true, trigger: 'blur', message: '不能为空'},
        authorizedGrantTypes: {required: true, trigger: 'blur', message: '不能为空'},
        scope: {required: true, trigger: 'blur', message: '不能为空'},
        accessTokenValidity: [
          {required: true, trigger: 'blur', message: '不能为空'},
          {type: 'number', message: '必须为数字值'},
        ]
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let form = {
        ...this.searchForm,
        page: this.page.currentPage
      }
      service.get('/small-service-account/oauth-client-details', form).then(res => {
        if (res.status === 200) {
          this.tableData = res.data;
          this.page.total = res.total;
        }
      })
    },
    authorizedGrantTypesF(v) {
      let a = true
      this.authorizedGrantTypes.forEach(val => {
        if (value === val.value) {
          a = false
        }
      })
      return a;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let form = {...this.form}
          form.authorizedGrantTypes = form.authorizedGrantTypes.toString()
          service.post('/small-service-account/oauth-client-details', form).then(this.callback)
        }
      })
    },
    edit(row) {
      row.clientSecret = null
      this.form = row
      this.dialogShow = true
    },
    del(row) {
      service.del('/small-service-account/oauth-client-details', {clientId: row.clientId}).then(this.callback)
    },
  }
}
</script>

<style scoped>

</style>